<template>
	<view class="content">
		<view class="uni-textarea">
			<textarea v-model="content" placeholder-style="color:#d9d9d9" placeholder="请在此处写下您遇到的问题或者对我们的建议"/>
		</view>
		<view class="uni-form-item uni-column">
			<view class="title">选填: 请填写您的联系方式以便我们能及时沟通</view>
			<input v-model="contact" class="uni-input"  placeholder="微信/QQ/手机号/邮箱" />
		</view>
		
		<view class="">
			<view class="login-form-btn" @click="post">确定提交</view>				
		</view>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	
	export default {
		data() {
			return {
				content: '',
				contact: ''
			}
		},
		methods: {
			...mapMutations(['getNetworkType','vuexRequest']),
			post() {
				if(!this.content){ 
					uni.showToast({
						icon: 'none',
						title: "请输入您的建议或者遇到的问题",
						position:'bottom'
					})
					return false; 
				}
				if(!this.contact){ 
					uni.showToast({
						icon: 'none',
						title: "请输入您的联系方式",
						position:'bottom'
					})
					return false; 
				}
				uni.showLoading({
					title: '提交中'
				});
				this.vuexRequest({
					url: '/api/addons/execute?route=feedback/create&addon=zo-web',
					method: 'POST',
					data: {content:this.content,contact:this.contact},
					success: (res)  => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '提交成功',
							position:'bottom'
						})
						uni.navigateBack()
					},
					fail: (err)  => {
						uni.showToast({
							icon: 'none',
							title: err.data.message,
							position:'bottom'
						})
						uni.hideLoading()
					},
				})
			}
		}
	}
</script>


<style>
	.uni-form-item{
		margin: 20upx 0 0 0;
	}
	.uni-form-item .title{
		padding-left: 0;
		color: #727675;
	}
	.content{
		padding: 30upx;
	}
	.login-form-btn{
		margin-top: 80upx;
		background: ;
		background-image: linear-gradient(to right, #f27072, #ea4a4c);
		text-align: center;
		border-radius: 10upx;
		height: 80upx;
		line-height: 80upx;
		font-size: 32upx;
		color: #FFFFFF;
	}
</style>
